<template>
  <div class="claim-dashboard">
    <div class="claim-header">
      <h2>理赔记录</h2>
      <p class="subtitle">您的保险理赔申请记录</p>
    </div>

    <div class="claim-list">
      <div v-for="claim in claimList" :key="claim.employeeAddress" class="claim-card">
        <div class="claim-card-header">
          <el-tag :type="claim.isFinish ? 'success' : 'warning'" class="status-tag">
            {{ claim.isFinish ? '已完成' : '处理中' }}
          </el-tag>
          <span class="claim-time">{{ claim.claimTime }}</span>
        </div>

        <div class="claim-card-content">
          <div class="info-row">
            <span class="label">理赔状态：</span>
            <span class="value">{{ claim.status }}</span>
          </div>
          <div class="info-row">
            <span class="label">用户地址：</span>
            <span class="value address">{{ claim.employeeAddress }}</span>
          </div>
        </div>

        <div class="claim-card-footer">
          <el-button type="text" @click="viewDetails(claim)" class="detail-button">
            查看详情
            <i class="el-icon-arrow-right"></i>
          </el-button>
        </div>
      </div>

      <!-- 无数据显示 -->
      <div v-if="claimList.length === 0" class="empty-state">
        <i class="el-icon-document"></i>
        <p>暂无理赔记录</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import myAxios from "../../plugins/myAxios.js";
import { onMounted } from 'vue';
import { ref } from 'vue';
import { ElNotification } from 'element-plus'

const claim = ref({})
const claimList = ref([])

const query = () => {
  console.log(localStorage.getItem('senderAddress'))
  myAxios.post("/user/getClaim", {userAddress: localStorage.getItem('senderAddress')})
    .then((res) => {
      if (res.data.code === 200) {
        console.log(res.data.data)
        claim.value = res.data.data;
        claimList.value = []
        claimList.value.push(claim.value)
        console.log(claim.value)
      } else {
        ElNotification({
          title: '错误',
          message: `请求失败：${res.data.msg}`,
          type: 'error'
        });
      }
    })
    .catch((error) => {
      ElNotification({
        title: '错误',
        message: `请求失败：${error || '未知错误'}`,
        type: 'error'
      });
    });
}

const viewDetails = (claim) => {
  // 这里可以添加查看详情的逻辑
  console.log('查看详情:', claim);
}

onMounted(() => {
  query()
})
</script>

<style scoped>
.claim-dashboard {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.claim-header {
  text-align: center;
  margin-bottom: 30px;
}

.claim-header h2 {
  font-size: 28px;
  color: #2c3e50;
  margin-bottom: 10px;
}

.subtitle {
  color: #666;
  font-size: 16px;
}

.claim-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  padding: 20px 0;
}

.claim-card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.claim-card:hover {
  transform: translateY(-5px);
}

.claim-card-header {
  padding: 15px 20px;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.status-tag {
  font-size: 14px;
  padding: 5px 12px;
}

.claim-time {
  color: #666;
  font-size: 14px;
}

.claim-card-content {
  padding: 20px;
}

.info-row {
  margin-bottom: 15px;
  display: flex;
  align-items: flex-start;
}

.label {
  color: #666;
  min-width: 80px;
  margin-right: 10px;
}

.value {
  color: #2c3e50;
  flex: 1;
}

.value.address {
  word-break: break-all;
  font-family: monospace;
  font-size: 14px;
}

.claim-card-footer {
  padding: 15px 20px;
  border-top: 1px solid #eee;
  text-align: right;
}

.detail-button {
  color: #409EFF;
  font-size: 14px;
}

.detail-button:hover {
  color: #66b1ff;
}

.empty-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: 40px;
  color: #909399;
}

.empty-state i {
  font-size: 48px;
  margin-bottom: 20px;
}

@media (max-width: 768px) {
  .claim-list {
    grid-template-columns: 1fr;
  }

  .claim-card {
    margin-bottom: 15px;
  }
}
</style>